<template>
  <div class="box" :style="{ backgroundImage: 'url(' + url + ')' }">
    <div class="advertise_box_keyan">
      <div class="advertise_title">科研绘图</div>
      <div class="advertise_details">
        期刊封面 ｜ 论文摘要图 ｜论文插图 ｜ 科学动画
      </div>
      <div class="advertise_Click" @click="showSaoMA = true">联系我们</div>
    </div>
    <div class="showERWEIMA" @click="showSaoMA = false" v-if="showSaoMA">
      <img
        class="showERWEIMA_img"
        src="https://www.diantangkeji.com:8084/static/erweima1727514979679.png"
        alt=""
      />
    </div>
  </div>
</template>
<script>
export default {
  name: "header",
  props: {
    url: {
      type: String,
      default: function () {
        return "";
      },
    },
  },
  data() {
    return { showSaoMA: false };
  },
  methods: {},
};
</script>

<style scoped>
.box {
  margin: 0 auto;
  width: 1920px;
  height: 430px;
  position: relative;
  /* 其他样式设置，比如背景尺寸、重复等 */
  background-size: cover; /* 让背景图片覆盖整个元素 */
  background-position: center; /* 背景图片居中显示 */
}
.advertise_box_keyan {
  position: absolute;
  top: 121px;
  left: 310px;
}
.advertise_title {
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-weight: 500;
  font-size: 36px;
  color: #ffffff;
}
.advertise_details {
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-size: 20px;
  color: #ffffff;
  margin: 15px 0 40px;
}
.advertise_Click {
  width: 174px;
  height: 54px;
  background: #ffffff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-weight: 500;
  font-size: 20px;
  color: #0365fe;
  cursor: pointer;
}
.showERWEIMA {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
}
.showERWEIMA_img {
  width: 290px;
  height: 290px;
  position: absolute;
  z-index: 999;
}
</style>
